<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>购物车示例</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div id="app" v-cloak>
			<template v-if="list.length">
				<table>
					<thead>
						<tr>
							<th>
								<input type="checkbox" v-model="checked" @change="changeAllChecked()">全选
							</th>
							<th></th>
							<th>商品名称</th>
							<th>商品单价</th>
							<th>购买数量</th>
							<th>操作</th>	
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in list">
							<td><input type="checkbox" :value="item.name" v-model="checkedNames"></td>
							<td>{{index+1}}</td>
							<td>{{item.name}}</td>
							<td>{{item.price}}</td>
							<td>
								<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
								{{item.count}}
								<button @click="handleAdd(index)">+</button>
							</td>
							<td>
								<button @click="handleRemove(index)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<div>总计:{{totalPrice}}元</div>
			</template>
			<div v-else>购物车为空</div>
			{{ checkedNames }}
		</div>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="js/index.js"></script>
  </body>
</html>
